<script lang="ts" setup>
import { onMounted } from 'vue'
import { RouterView, RouterLink, useRouter } from 'vue-router'

const router = useRouter()

onMounted(() => {
  // setTimeout(() => {
  //   router.push('/newslist')
  // }, 3000)
})
</script>
<template>
  <div>
    <h1>home</h1>
    <!-- 侧边导航栏 -->
    <div class="left">
      <ul>
        <router-link to="/url_count" replace active-class="active">计数器</router-link>
        <br />
        <!-- <router-link to="/cart" active-class="active">购物车</router-link><br /> -->
        <router-link :to="{ name: 'name_cart' }" replace active-class="active">购物车</router-link
        ><br />

        <router-link to="/todoList" active-class="active">待办列表</router-link>
        <br />
        <router-link to="/newslist" active-class="active">新闻列表</router-link>
        <br />
        <router-link to="/movielist" active-class="active">电影列表</router-link>
        <br />
        <router-link to="/myData" active-class="active">组件数据传递</router-link>
        <br />
        <router-link to="/Yeye" active-class="active">爷爷传数据给小孙孙</router-link>
        <br />

        <!-- <li><a href="/cart">购物车</a></li>
        <li><a href="#">计数器</a></li>
        <li><a href="#">待办列表</a></li> -->
      </ul>
    </div>

    <!-- 数据展示 -->
    <div class="right">
      <RouterView> </RouterView>
    </div>
  </div>
</template>
<style scope>
.left {
  width: 300px;
  height: 600px;
  border: 1px solid blue;
  float: left;
}
.right {
  width: 100%;
  height: 600px;
  border: 1px solid red;
}
.active {
  background-color: yellow;
}
</style>
